<script setup lang="ts">
import { onMounted, ref } from 'vue'
import axios from 'axios';
import { DocumentEditor } from "@onlyoffice/document-editor-vue";
import { ElMessage } from 'element-plus'

  const showDocument = ref(false)
  function createNewDoc(type: string) {
    userForm.value.docType = type
    userForm.value.docKey = '4d2b0926-716e-49e2-ba3e-12238afedaf6'
    if (userForm.value.id <= 0 || isNaN(userForm.value.id)) {
      ElMessage.error('ID不能小于0')
      return
    }

    if (!userForm.value.name) {
      ElMessage.error('姓名不能为空')
      return 
    }

    // http://localhost:8080/document/api/create
    axios.post('http://172.30.23.105:6080/document/api/create', userForm.value).then(res => {
      // console.log(res.data.data.config)
      config.value = res.data.data.config
      config.value.token = res.data.data.token
      showDocument.value = true
      // console.log(config.value)
    }).catch(err => {
      console.log(err);
    })
  }

  function createNewExcel(type: string) {
    userForm.value.docType = type
    userForm.value.docKey = 'server-dep-plan-2'
    if (userForm.value.id <= 0 || isNaN(userForm.value.id)) {
      ElMessage.error('ID不能小于0')
      return
    }

    if (!userForm.value.name) {
      ElMessage.error('姓名不能为空')
      return 
    }

    axios.post('http://172.30.23.105:6080/document/api/create', userForm.value).then(res => {
      // console.log(res.data.data.config)
      config.value = res.data.data.config
      config.value.token = res.data.data.token
      showDocument.value = true
      console.log(config.value)
      // console.log(config.value)
    }).catch(err => {
      console.log(err);
    })
  }

  // const config = ref(
  //   {
  //         document: {
  //             fileType: "docx",
  //             key: "4d2b0926-716e-49e2-ba3e-12238afedaf6",
  //             title: "Example Document Title.docx",
  //             url: "http://172.30.23.105:8080/documents/4d2b0926-716e-49e2-ba3e-12238afedaf6.docx"
  //         },
  //         documentType: "word",
  //         editorConfig: {
  //             callbackUrl: "http://172.30.23.105:6080/document/api/callback",
  //             // token: ''
  //         },
          
  //     })
  const config = ref(
    // {"document":{"fileType":"docx","key":"4d2b0926-716e-49e2-ba3e-12238afedaf6","permissions":{"comment":true,"commentGroups":{"edit":[],"remove":[],"view":""},"copy":true,"deleteCommentAuthorOnly":false,"download":true,"edit":true,"editCommentAuthorOnly":false,"fillForms":true,"modifyContentControl":true,"modifyFilter":true,"print":true,"review":true,"reviewGroups":["方案解决部"]},"url":"http://172.30.23.105:8080/documents/4d2b0926-716e-49e2-ba3e-12238afedaf6.docx"},"editorConfig":{"callbackUrl":"http://172.30.23.105:6080/document/api/callback","mode":"edit","user":{"group":"方案解决部","id":"1","name":"董亮之"}}}
  )

  function onDocumentReady() {
      console.log("Document is loaded");
  }

  function onLoadComponentError (errorCode, errorDescription) {
      switch(errorCode) {
          case -1: // Unknown error loading component
              console.log(errorDescription);
              break;

          case -2: // Error load DocsAPI from http://documentserver/
              console.log(errorDescription);
              break;

          case -3: // DocsAPI is not defined
              console.log(errorDescription);
              break;
      }
  }

  function onDocumentStateChange(event) {
    if (event.data) {
      console.log("The document changed")
    } else {
      console.log("Changes are collected on document editing service")
    }
  }

  // 表单数据对象
  const userForm = ref({
    id: 0,
    name: '',
    docType:'',
    docKey: ''
  })

  onMounted(() => {

  })
</script>

<template>
  <main>
    <div class="common-layout">
      <el-container style="margin-top: 30px;">
        <el-header>
          <el-row>
            <el-col :span="24">
              <div 
                class="grid-content ep-bg-purple-dark" 
                style="">
                <!-- <el-button type="" link @click="createNewDoc('docx')">
                  新建Doc
                </el-button>

                <el-button type="" link @click="createNewDoc('xlsx')">
                  新建Excel
                </el-button> -->
              </div>
            </el-col>
          </el-row>
        </el-header>
        <el-main>
          <el-form :model="userForm" label-width="auto" style="max-width: 600px; margin-bottom: 20px;">
            <el-form-item label="ID">
              <el-input v-model="userForm.id" />
            </el-form-item>
            <el-form-item label="姓名">
              <el-input v-model="userForm.name" />
            </el-form-item>
            <el-button type="success" @click="createNewDoc('docx')">
              新建Doc
            </el-button>
            <el-button type="primary" @click="createNewExcel('xlsx')">
                  新建Excel
            </el-button>
          </el-form>
          <DocumentEditor 
              id="docEditor" 
              documentServerUrl="http://172.30.23.106:7080/"
              :config="config"
              :events_onDocumentReady="onDocumentReady"
              :onLoadComponentError="onLoadComponentError"
              v-if="showDocument"
          /> 
        </el-main>
      </el-container>
    </div>
  </main>
</template>

<style lang="css" scoped>
.common-layout {
  /* height: 100vh; */
  
}
.el-main{
  width: 85vw;
  height: 85vh;
  /* background-color: aqua; */

}
.el-header{
  width: 85vw;
  background-color: rgb(159.5, 206.5, 255);
  
  
}
.grid-content{
  /* padding-left: 5px; 
  padding-right: 15px;  */
  height: 50px; 
  line-height: 50px; 
  display: flex; 
  justify-content: right;
}
</style>
